<template>
	<div class="main_container">
		<!-- 搜索框部分 -->
		<div id="search">
			<el-form :inline="true" :model="searchData" id="search_form">
				<el-form-item label="类名">
					<el-input class="search_input" v-model="searchData.name" clearable />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="handleCreate()">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- END搜索框部分 -->
		<div class="table_container">
			<div class="table">
				<el-table :data="typeList" height="100%">
					<el-table-column label="序号" width="180">
						<template slot-scope="scope">
							{{ scope.$index + 1 }}
						</template>
					</el-table-column>
					<el-table-column label="类名" prop="name" width="180"></el-table-column>
					<el-table-column label="所属版本" prop="version"></el-table-column>
					<el-table-column label="操作" prop="version">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleUpdate(scope.row)">
								修改类名
							</el-button>
							<el-button size="small" type="danger" @click="handleDelete(scope.row)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "buildType",
		data() {
			return {
				typeList: [],
				searchData: {
					name: "",
				}
			}
		},
		methods: {
			search() {
				this.$api.get("/type/build/list", this.searchData).then((res) => {
					this.typeList = res.data.list;
				})
			},
			handleCreate() {
				this.$prompt('请输入类名', '创建', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValidator: (value) => { //非空验证
						if (!value) return '输入不能为空'
					}
				}).then(({
					value
				}) => {
					this.$api.post("/type/build/create", {
						name: value
					}).then((res) => {
						this.$message({
							message: res.message,
							type: res.code == 0 ? 'success' : 'error',
						})
						this.search();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			handleUpdate(type) {
				this.$prompt('请输入新类名', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValidator: (value) => { //非空验证
						if (!value) return '输入不能为空'
					}
				}).then(({
					value
				}) => {
					this.$api.post("/type/build/rename", {
						id: type.id,
						name: value
					}).then((res) => {
						this.$message({
							message: res.message,
							type: res.code == 0 ? 'success' : 'error',
						})
						this.search();
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});
			},
			handleDelete(type) {
				this.$confirm("此操作将永久删除该类, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						console.log("删除", type)
						this.$api.post("/type/build/remove", {
							id: type.id
						}).then((res) => {
							this.$message({
								message: res.message,
								type: res.code == 0 ? 'success' : 'error',
							})
							this.search();
						});
					})
					.catch(() => {
						this.$message({
							type: "warning",
							message: "已取消删除",
						});
					});
			},
		},
		created() {
			this.search();
			var search = this.search;
			this.$version.addListener("build-type", function(version) {
				search();
			})
		},
		destroyed() {
			this.$version.removeListener("build-type");
		},
	}
</script>

<style lang="less" scoped>
	.main_container {
		width: 100vw;
		height: calc(100vh - 60px);

		#search {
			background-color: white;
			padding: 10px;
			border-radius: 8px;
			height: 60px;
			box-sizing: border-box;
			width: 100%;
			text-align: right;
			// 保证搜索框向右对齐

			#search_form {
				/deep/ .el-form-item {
					margin-bottom: 0;
				}
			}
		}

		.table_container {
			width: 100%;
			height: calc(100vh - 120px - 10px);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			.table {
				width: 60%;
				height: calc(100vh - 120px - 20px);
				margin: auto;
				overflow: auto;

			}
		}
	}

	.align-center {
		text-align: center;
	}
</style>